<template>
<div style="text-align: center">
  <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" style="width: 279px;height: 129px; ">
  <form action="https://www.baidu.com/s">
    <div class="box"><input type="text" class="input" placeholder="又不会了？百度一下!" name="wd"/><input type="submit" class="get" value="百度一下"/></div>
  </form>
</div>
</template>


<script>
export default {
  data () {
    return {
    }
  },

}
</script>
<style>
.input{
  width: 512px;
  height: 16px;
  font-size: 16px;
  vertical-align: top;
  border-radius: 10px 0 0 10px;
  border-top: 2px solid #c4c7ce;
  border-left: 2px solid #c4c7ce;
  border-bottom: 2px solid #c4c7ce;
  background-color: #fff;
  color: #222;
  overflow: hidden;
  box-sizing: content-box;
  outline-color: #4e6ef2;
  padding: 12px 16px;
}
.box{
  width: 656px;
  margin: 20px auto;
}
.get{
  width: 108px;
  height: 44px;
  line-height: 45px;
  padding: 0;
  background-color: #4e6ef2;
  border-radius: 0 10px 10px 0;
  font-size: 17px;
  color: #fff;
  font-weight: 400;
  border: none;
  outline: 0;
}
</style>